import React, { useContext } from "react";
import { Link, Outlet, useNavigate, useLocation } from "react-router-dom";
import { Layout, Dropdown, Menu, Space, message, Button } from "antd";
import {
  CaretDownOutlined,
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from "@ant-design/icons";
import "./less/home.less";
import logo from "./logo.png";
import defaultAvatar from "./defaultAvatar.jpg";
import { useState } from "react";
import { useEffect } from "react";
import Bread from "./Bread";
const { Header, Footer, Sider, Content } = Layout;

export default function Home() {
  const navigate = useNavigate();
  const [avatar, setAvatar] = useState(defaultAvatar);
  const [username, setUsername] = useState("游客");
  const [defaultKey, setDefaultKey] = useState("list");
  const location = useLocation();

  // const keyContent = useContext()
  useEffect(() => {
    let pathname = location.pathname;
    let key = pathname.split("/")[1];
    setDefaultKey(key);
    // console.log(location);
  }, [location.pathname]);

  useEffect(() => {
    let username1 = localStorage.getItem("username");
    let avatar1 = localStorage.getItem("avatar");
    if (username1) {
      setUsername(username1);
    }
    if (avatar1) {
      setAvatar("http://47.93.114.103:6688/" + avatar1);
    }
  }, [localStorage.getItem("avatar")]);

  function loginOut(e) {
    e.preventDefault();
    localStorage.clear();
    message.success("即将退出登录");
    setTimeout(() => navigate("/login"), 1000);
  }

  const menu = (
    <Menu
      items={[
        {
          key: "1",
          label: <a>修改头像</a>,
        },
        {
          type: "divider",
        },
        {
          key: "2",
          label: <a onClick={(e) => loginOut(e)}>退出登录</a>,
        },
      ]}
    />
  );

  // menu部分
  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }

  const items = [
    getItem("List", "list", <MailOutlined />),
    getItem("Edit", "edit", <AppstoreOutlined />),
    getItem("Means", "means", <SettingOutlined />),
  ];
  const [collapsed, setCollapsed] = useState(false);
  const onClick = (e) => {
    console.log("click ", e);
    navigate("/" + e.key);
    setDefaultKey(e.key);
  };

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  return (
    <Layout className="app">
      <header>
        <img src={logo} alt="" />
        <div>
          <Dropdown overlay={menu}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <img src={avatar} className="defaultAvatar" alt="" />
                <span>{username}</span>

                <CaretDownOutlined />
              </Space>
            </a>
          </Dropdown>
        </div>
      </header>
      <Layout>
        <Sider>
          <Menu
            onClick={onClick}
            style={{
              color: "#fff",
              width: 200,
              backgroundColor: "#001529",
            }}
            selectedKeys={[defaultKey]}
            // defaultOpenKeys={["list"]}
            mode="inline"
            items={items}
            theme="dark"
            inlineCollapsed={collapsed}
          />
        </Sider>
        <Content>
          <Bread defaultKey={defaultKey}></Bread>
          <div className="container">{<Outlet />}</div>
        </Content>
      </Layout>
      <footer>Respect | Copyright &copy; 2022 Author 你单排吧</footer>
    </Layout>
  );
}
